<template>
	<scroll-view class="container-root">
		<view v-if="historyOrder == null" class="empty-root">
			<image class='empty-image' src='/static/images/sigh.png'></image>
			<text>未查询到账单信息</text>
		</view>
		
		<view v-else class="order-item-layer" v-for="(item,index) in historyOrder" hover-class="item-hover" hover-stay-time="50" :key='index' >
			<view class='order-item-one'>
				<view class='order-name'>{{item.orderName}}</view>
				<view class='order-money'>{{item.totalMoney}}</view>
			</view>	
			<view class='order-item-two'>
				<view>{{item.payTime}}</view>				
				<view class='order-print-button' hover-class='order-button-hover'  hover-stay-time='50' @tap='onItemClick(index)'>打印发票</view>  
			</view>			
		</view>	
	</scroll-view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import httpRequest from '@/utils/utilHttp.js'
	
	export default {
		data() {
			return {
				historyOrder:null
			}
		},
		computed:{
			...mapState(['token', 'userInfo']), //对全局变量hasLogin进行监控
		},		
		onLoad(){
			uni.setNavigationBarTitle({
				title:"历史订单",
			});
			this.getHistoryOrder();
		},
		methods: {
			onItemClick(index){
				var orderId = this.historyOrder[index].orderId;
				//console.log('orderID....');
				uni.navigateTo({
					url: './invoice-print/invoice-print?orderID=' + orderId,
				})
			},
			getHistoryOrder:function(){
				var self = this;
				let params = {
					userCode: self.userInfo.userCode,
					type: '1'// 不传-查所有，0-查未支付订单，1-查已支付订单
				};
				let options = {
					url:httpRequest.requestUrl.getHistoryOrder,
					method:httpRequest.requestMethod.GET,
					datas:params
				}
				httpRequest.Request(options).then(res => {
					//console.log(res)
					if (res.data.status == 200) {
						self.historyOrder = res.data.content;				
					}
				})
			}			
		}
	}
</script>

<style>
	.order-item-layer{
		width: calc(100% - 40rpx);
		padding: 0rpx 20rpx 0rpx 20rpx;
		background-color: white;
	}
	.order-item-head{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0rpx 20rpx 0rpx;
	}
	.order-item-line{
		width: 100%;
		height: 1rpx;
		background-color: #F1F1F1;
	}
	.order-item-one{
		display: flex;
		
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0rpx 20rpx 0rpx;
	}
	.order-item-two{
		display: flex;
		
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.order-print-button {
		background-color: #00b9ef;
		color: white;
		border-radius: 10rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
	}
	.order-button-hover {
	  background-color: rgba(0,185,239,0.7);
	} 
</style>
